<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mua - 位置共享</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 位置共享界面 -->
        <div class="screen">
            <div class="screen-title">位置共享</div>
            <div class="location-screen">
                <!-- 位置地图 -->
                <div class="location-map">
                    <div class="location-map-placeholder">
                        <img src="love.png" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.3;">
                        <div class="location-markers">
                            <div class="location-marker my-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>我</span>
                            </div>
                            <div class="location-marker partner-location">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>TA</span>
                            </div>
                            <div class="location-distance">
                                <i class="fas fa-route"></i>
                                <span>2.5 公里</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 位置信息卡片 -->
                <div class="location-cards">
                    <div class="location-card">
                        <div class="location-card-header">
                            <div class="location-card-title">我的位置</div>
                            <div class="location-card-time">10分钟前更新</div>
                        </div>
                        <div class="location-card-content">
                            <i class="fas fa-building"></i>
                            <span>公司 - 上海市浦东新区张江高科技园区</span>
                        </div>
                    </div>
                    
                    <div class="location-card">
                        <div class="location-card-header">
                            <div class="location-card-title">TA的位置</div>
                            <div class="location-card-time">5分钟前更新</div>
                        </div>
                        <div class="location-card-content">
                            <i class="fas fa-graduation-cap"></i>
                            <span>学校 - 上海交通大学闵行校区</span>
                        </div>
                    </div>
                    
                    <div class="location-settings">
                        <div class="location-setting-item">
                            <div class="location-setting-text">实时位置共享</div>
                            <label class="switch">
                                <input type="checkbox" checked>
                                <span class="slider round"></span>
                            </label>
                        </div>
                        <div class="location-setting-item">
                            <div class="location-setting-text">位置变动提醒</div>
                            <label class="switch">
                                <input type="checkbox" checked>
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                </div>
                
                <div class="bottom-nav">
                    <div class="nav-item" data-page="dashboard.html">
                        <i class="fas fa-home"></i>
                        <span>主页</span>
                    </div>
                    <div class="nav-item" data-page="period.html">
                        <i class="fas fa-moon"></i>
                        <span>大姨妈</span>
                    </div>
                    <div class="nav-item active" data-page="location.html">
                        <i class="fas fa-map-marked-alt"></i>
                        <span>位置</span>
                    </div>
                    <div class="nav-item" data-page="settings.html">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
    <script>
        // 导航栏跳转
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                const page = this.getAttribute('data-page');
                if (page) {
                    window.location.href = page;
                }
            });
        });
    </script>
</body>
</html> 